<template>
    <div class="step-2">
        <el-table :data="tableData" style="width: 100%" :header-row-style="{ color: '#202536' }"
            :header-cell-style="{ background: '#f8f8f8' }" :row-style="{ color: '#5E617D' }">
            <el-table-column prop="index" label="序号" width="50" />
            <el-table-column prop="userName" label="姓名" />
            <el-table-column prop="idCardNo" label="身份证号" />
            <el-table-column prop="salaryAmount" label="薪资标准" />
            <el-table-column prop="msg" label="错误原因" />
        </el-table>
        <div class="hint-box flex mg-t-20">
            <div class="mg-r-5">
                <el-icon class="fc-orange">
                    <WarningFilled />
                </el-icon>
            </div>
            <div>
                <div>以上人员信息有误，请在Excel里核对修改无误后重新导入。</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    props: {
        errorList: {
            type: Array,
            default() {
                return []
            }
        }
    },
    components: {
    },
    data() {
        return {
            tableData: []
        }
    },
    computed: {

    },
    watch: {
        errorList(newval) {
            this.tableData = newval
        }
    },
    methods: {
        handleEdit(row: any) {
            row.editable = !row.editable
        },
        handlePreview() {

        },
        handleRemove() {

        },
        beforeRemove() {

        },
        handleExceed() {

        }
    }
})

</script>
<style lang="stylus" scoped>
.hint-box
    background rgba(255, 126, 104, 0.1)
    border-radius 4px
    padding 12px

:deep() .readonly .el-input__inner
    border none  !important
    background transparent !important

</style>